<template>
    <div id="timeLapse">
        <div class="container-360 flex-center" @click="contorlVideo">
            <video class="video-360" ref="video" :src="video.src"></video>
        </div>
        <div class="bottom-handle flex-between">
            <div class="image-tool pointer flex-center" @click="startVideo" v-show="!play">
                <img src="../../assets/img/start.png" alt="">
            </div>
            <div class="image-tool pointer flex-center" @click="stopVideo" v-show="play">
                <img src="../../assets/img/stop.png" alt="">
            </div>
            <div class="slider flex-between">
                <div class="tips" style="margin-right:17px">{{video.times[0]}}</div>
                <div style="flex:1">
                    <el-slider v-model="sliderVal" :show-tooltip="false" :step="step" :max="max" @change="onchange" @input="changeSliderVal"></el-slider>
                </div>
                <div class="tips" style="margin:0 17px ">{{video.times[1]}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import mixin from '../../mixin/mixin'
export default {
    name: "TimeLapse",
    mixins: [mixin],
    data() {
        return {
            video: {
                src: '',
                times: []
            },
            sliderVal: 0,
            videoTime: 0,
            max: 100,
            interval: null,
            step: 1,
            play: false,
            time: 0
        }
    },
    mounted() {
        if (this.bsr.video) {
            let suffix = this.getFileSuffix(this.bsr.video)
            this.video.src = window.$DATADIR + `resc/TimeLapse/${this.bsr.id}/${this.bsr.video.replace(/\.(?=[a-z])[a-z]{2,3}[a-z0-9]$/i, suffix)}`
            this.video.times = this.bsr.times.split('|')
        }
        this.$nextTick(() => {
            this.playVideo()
            this.$electron.ipcRenderer.send('empty-win-created-successed')
        })

    },
    methods: {
        onchange(){
            this.$refs.video.currentTime=this.time

        },
        changeSliderVal(val) {
            if (val === 0) return
            this.time  = val / 100 * this.videoTime
        },
        contorlVideo() {
            this.play ? this.stopVideo() : this.startVideo()
        },
        startVideo() {
            if(this.time >= this.videoTime){
                this.$refs.video.currentTime = 0
                this.sliderVal = 0
                this.time = 0
            }
            this.$refs.video.play()
            this.play = true
            this.interval = setInterval(() => {
                this.sliderVal += this.step * 6
                this.time++
                if (this.time >= this.videoTime) {
                    this.play = false
                    clearInterval(this.interval)
                }
            }, 1000)
        },
        stopVideo() {
            this.$refs.video.pause()
            this.play = false
            clearInterval(this.interval)
        },
        playVideo() {
            this.$refs.video.oncanplay = () => {
                this.videoTime = this.$refs.video.duration
                // this.max  = Math.ceil(100 / 100 * this.videoTime * 6) * 100 / this.videoTime / 6
                this.max = 98
                this.step = 100 / this.videoTime / 6
                console.log(this.max ,this.step);
            }
        },
    },
}
</script>

<style lang="scss">
#timeLapse {
    .container-360 {
        width: 100vw;
        height: calc(100vh - 80px);
        position: relative;
        overflow: hidden;
        .video-360 {
            height: 100%;
        }

        img {
            height: 100%;
            position: absolute;
        }
    }
    .bottom-handle {
        width: 100vw;
        height: 50px;
        background-color: #dcdfe7;
        padding: 0 20px;
        box-sizing: border-box;
        .image-tool {
            margin-right: 20px;
            img {
                width: 32px;
                height: 32px;
            }
        }
        .slider {
            flex: 1;
            .tips {
                font-size: 14px;
                color: #606266;
            }
        }
    }
}
</style>
